<template>
  <a-radio-group buttonStyle="solid" v-if="hasAuth"
                 :loading="loading"
                 :disabled="disabled"
                 v-model="modeDisplay" style="float:right;margin-bottom: 8px" @change="handleClick">
    <a-radio-button :value="false">
      管理视图
    </a-radio-button>
    <a-radio-button :value="true">
      普通视图
    </a-radio-button>
  </a-radio-group>
<!--  <a-switch-->
<!--    :size="size"-->
<!--    @click="handleClick"-->
<!--    v-if="hasAuth"-->
<!--    :loading="loading"-->
<!--    :disabled="disabled"-->
<!--    v-model="modeDisplay"-->
<!--    checked-children="普通视图"-->
<!--    un-checked-children="管理视图">-->
<!--  </a-switch>-->
<!--  <span v-else></span>-->
  <!-- <a-tooltip v-else>
    <template slot="title">
      <span>{{ $t('noSuchPermission') }}</span>
    </template>
    <a-switch
      class="disabledAuthSwitchWrap"
      v-model="modeDisplay"
      checked-children="普通视图"
      :disabled="true"
    >
    </a-switch>
  </a-tooltip> -->
</template>
<script>
export default {
  props: {
    modeDisplay: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'default'
    },
    // 按钮的权限key
    auth: {
      type: [String, Array],
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    hasAuth () {
      // auth没有值的情况下，说明无需要权限验证；有值则需要验证是否拥有此权限
      let { auth } = this
      if (typeof this.auth === 'string') {
        auth = [this.auth]
      }
      return !this.auth || this.$hasPermission(auth)
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleClick () {
      if (!this.hasAuth) {
        return
      }
      this.$emit('click')
    }
  }
}
</script>
<style scoped lang="less">
// .disabledAuthSwitchWrap {
//   ::v-deep .ant-switch {
//     background-color: #ccc;
//     .ant-switch-inner {
//     color:#000;
//   }
//   }
// }
.ant-switch {
  background-color: #4388A6;
}
</style>
